<template>
  <!--商品基本信息-->
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <img :src="form.pictureName" width="150px" height="150px">
      </el-aside>
      <el-main>
        <table style="width: 70%;">
          <thead></thead>
          <tbody>
            <tr style="height: 50px;">
              <td style="font-weight: bolder;font-size: 30px">{{ form.shoppingNames }}</td>
            </tr>

            <tr style="height: 50px;">
              <td>生产批次：{{ form.productionBatch }}</td>
              <td>保质期：{{ form.qgPeriod }}天</td>
            </tr>

            <tr style="height: 50px;">
              <td>生产许可证号：{{ form.productionLicense }}</td>
              <td>生产企业：{{ form.manufacturingEnterprise }}天</td>
            </tr>

            <tr style="height: 50px;">
              <td style="font-weight: bold;">产品检验报告</td>
            </tr>

            <tr>
              <td><img :src="form.pictureName" width="100px" height="100px"></td>
              <td>
                <el-button style="width: 80px;height: 80px;" @click="dialogFormVisible=true">+</el-button>
              </td>
            </tr>
          </tbody>
        </table>
      </el-main>
    </el-container>
  </div>

<div>
  <table>
    <thead></thead>
    <tbody>
      <tr>
        <td>
          <el-button type="primary" @click="router.push('BreedView?shoppingId='+form.shoppingId)">养殖信息</el-button>
        </td>

        <td>
          <el-button type="primary" @click="router.push('Slaughter?shoppingId='+form.shoppingId)">屠宰信息</el-button>
        </td>

        <td>
          <el-button type="primary" @click="router.push('DeepProcessing?shoppingId='+form.shoppingId)">深加工信息</el-button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

    <!--表单添加商品产检报告--图片-->
<div>
  <el-dialog v-model="dialogFormVisible" width="500" align-center>
    <el-upload class="avatar-uploader" action="http://localhost:5063/api/PictureManagement/UploadFile" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
    <img v-if="form.pictureNames" :src="form.pictureNames" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</el-dialog>
</div>

<RouterView></RouterView>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import axios from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Edit, Search, Share, Upload,Plus } from '@element-plus/icons-vue'
import {useRoute,useRouter} from 'vue-router'
import type { UploadProps } from 'element-plus'

const route = useRoute();
const router = useRouter();
//表单校验
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

//产品检验报告对话框
const dialogFormVisible = ref(false)

onMounted(() => {
  saveUpdate()
})

const form: any = reactive({
  shoppingId: route.query.shoppingId,
  shoppingNameId: '',
  productionBatch: '',
  qgPeriod: '',
  productionLicense: '',
  manufacturingEnterprise: '',
  pictureId: '',
  pictureName: '',
  pictureNames: '',
  createdBy: '',
  createdDate: '',
  deletedBy: '',
  deletedDate: '',
  updatedBy: '',
  updateDate: '',
  isDeleted: '',
  shoppingNames: '',
})

//图片上传
const handleAvatarSuccess = (picUrl: any) => {
  console.log(picUrl);
  
  form.pictureName = picUrl.data;
} 
//上传前判断(文件类型、文件大小)
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/gif' && rawFile.type !== 'image/png') {
    ElMessage.error('文件格式必须是[JPG,GIF,PNG]格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('文件大小不能超过2MB!')
    return false
  }
  return true
}

//反填商品信息
const saveUpdate = () => {
  let Backshopping = {
    shoppingId:form.shoppingId
  }
  axios.post('api/ShoppingManagement/BackInfoShopping',Backshopping).then(res => {
    //console.log(res);
    let back = res.data.data;
    form.shoppingId = back.shoppingId;
    form.shoppingNameId = back.shoppingNameId;
    form.shoppingNames = back.shoppingNames;
    form.productionBatch=back.productionBatch;
    form.qgPeriod=back.qgPeriod;
    form.productionLicense=back.productionLicense;
    form.manufacturingEnterprise = back.manufacturingEnterprise;
    form.pictureId = back.pictureId;
    form.pictureName = back.pictureName;   
    form.createdBy = back.createdBy;
    form.createdDate = back.createdDate;
    form.deletedBy = back.deletedBy;
    form.deletedDate = back.deletedDate;
    form.updatedBy = localStorage.userName;
    form.updateDate=Date.now;
    form.isDeleted=back.isDeleted
  }).catch(err => {
    console.log(err);

  })
}

</script>

<style scoped>

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

</style>